<template>
    <el-card class="outerBox">
        <!-- <div class="container">
            <img src="/public/tag_2.png" alt="">
            <div class="tag">方差最高前十题</div>
        </div> -->
        <div ref="chart" class="chart"></div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue';
import * as echarts from 'echarts';
import eventBus from '/eventBus';
const chart = ref(null);

// 图表数据
const yAxis = ref([]);
const optionData = ref([]);

// 监听数据变化
watch(() => eventBus.state.Top_variance, (newScores) => {
    convertType(newScores);
    nextTick(() => {
        initChart();
    });
}, { deep: true });

// 数据转换
const convertType = (scores) => {
    yAxis.value = [];
    optionData.value = [];
    for (const score of scores) {
        yAxis.value.push(score.question);
        optionData.value.push(score.variance);
    }
}

// 初始化图表
const initChart = () => {
    const myChart = echarts.init(chart.value);
    const option = {
        title: {
            text: '方差最高前十题',
            left: 'center',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: yAxis.value
        },
        series: [
            {
                type: 'bar',
                // itemStyle: {
                //     normal: {
                //         color: '#5875d0'
                //     }
                // },
                itemStyle: {
                    borderRadius: 10,
                    normal: {
                        label: {
                            show: true, //开启显示
                            // position: 'top', //在上方显示
                            textStyle: { //数值样式
                                color: 'white',
                                fontSize: 16
                            }
                        }
                    }
                },
                data: optionData.value
            }
        ]
    };
    myChart.setOption(option);
};

onMounted(() => {
    // 初始化或重置图表
    if (eventBus.state.Top_variance.length) {
        convertType(eventBus.state.Top_variance);
        // console.log("eventBus.state.Top_variance", eventBus.state.Top_variance);
        nextTick(() => {
            initChart();
        });
    }
});
</script>
<style lang="scss" scoped>
.outerBox{
    box-sizing: border-box;
    margin-bottom: 20px;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    // align-items: center;
    .container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 230px;
        height: 40px;
        background-color: #94c1f3;
        border-bottom: 2px solid #4f2e06;
        border-radius: 5px;
        margin-left: 20px;
        img {
                margin: 1px 0px 0px -80px;
                width: 49px;
                height: 39px;
        }
        .tag {
            text-align: center;
            color: white;
        }
    }
    .chart {
        width: 700px;
        height: 400px;
    }
}

</style>
